<html>
    <head>
        <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> -->
        <style>
            body{
                background: aliceblue;
            }
             #sidebar{
                width: 100%;
                height: 100%;
            }

            #sidebar header {
                height: 8%;
                background-color: #263238;
                font-size: 20px;
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            #sidebar main{
                padding: 15px 0;
            }

            #sidebar header a {
                color: #fff;
                display: block;
                text-decoration: none;
            }


            #sidebar .menu{
                height: 60px;
                display: flex;
                justify-content: center;
                align-items: center;
                /* background-color: aqua; */
            }

            #sidebar .menu:hover{
                background-color: rgb(238, 241, 244);
                cursor: pointer;
            }

            #sidebar .menu .item{
                /* background: orange; */
                width: 45%;
                height: 60%;
                border-radius: 10px;
                text-align: center;
                align-items: center;
                display: flex;
                justify-content: space-around;
                
            }

            #sidebar .menu .item a{
                color: #333333;
                text-decoration: none;
            }

            /* 选中的样式 */
            .active{
                background-color:rgb(0, 107, 254);
                color: white !important;
            }

            .white{
                color: white !important;
            }

        </style>
    </head>
    <body>
        <div id="sidebar">
            <header>
                <span href="#">图表展示系统</span>
            </header>
            <main>
                <div class="menu"  onclick="simulateClick(this)">
                    <div class="item active">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-rocket-fill" viewBox="0 0 16 16">
                            <path d="M10.175 1.991c.81 1.312 1.583 3.43 1.778 6.819l1.5 1.83A2.5 2.5 0 0 1 14 12.202V15.5a.5.5 0 0 1-.9.3l-1.125-1.5c-.166-.222-.42-.4-.752-.57-.214-.108-.414-.192-.627-.282l-.196-.083C9.7 13.793 8.85 14 8 14c-.85 0-1.7-.207-2.4-.635-.068.03-.133.057-.198.084-.211.089-.411.173-.625.281-.332.17-.586.348-.752.57L2.9 15.8a.5.5 0 0 1-.9-.3v-3.298a2.5 2.5 0 0 1 .548-1.562l.004-.005L4.049 8.81c.197-3.323.969-5.434 1.774-6.756.466-.767.94-1.262 1.31-1.57a3.67 3.67 0 0 1 .601-.41A.549.549 0 0 1 8 0c.101 0 .17.027.25.064.037.017.086.041.145.075.118.066.277.167.463.315.373.297.85.779 1.317 1.537ZM9.5 6c0-1.105-.672-2-1.5-2s-1.5.895-1.5 2S7.172 8 8 8s1.5-.895 1.5-2Z"/>
                            <path d="M8 14.5c.5 0 .999-.046 1.479-.139L8.4 15.8a.5.5 0 0 1-.8 0l-1.079-1.439c.48.093.98.139 1.479.139Z"/>
                        </svg>
                        <a href="page/home.html" class="white" target="content">控制台</a>
                    </div>
                </div>

                <div class="menu" onclick="simulateClick(this)">
                    <div class="item">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pie-chart-fill" viewBox="0 0 16 16">
                            <path d="M15.985 8.5H8.207l-5.5 5.5a8 8 0 0 0 13.277-5.5zM2 13.292A8 8 0 0 1 7.5.015v7.778l-5.5 5.5zM8.5.015V7.5h7.485A8.001 8.001 0 0 0 8.5.015z"/>
                          </svg>
                        <a href="page/pie.html" target="content">饼状图</a>
                    </div>
                </div>

                <div class="menu" onclick="simulateClick(this)">
                    <div class="item">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart-line-fill" viewBox="0 0 16 16">
                            <path d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2z"/>
                            </svg>
                        <a href="page/bar.html" target="content">柱状图</a>
                    </div>
                </div>

                <div class="menu" onclick="simulateClick(this)">
                    <div class="item">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-activity" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"/>
                          </svg>
                        <a href="page/line.html" target="content">折线图</a>
                    </div>
                </div>

                <div class="menu" onclick="simulateClick(this)">
                    <div class="item">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-command" viewBox="0 0 16 16">
                            <path d="M3.5 2A1.5 1.5 0 0 1 5 3.5V5H3.5a1.5 1.5 0 1 1 0-3zM6 5V3.5A2.5 2.5 0 1 0 3.5 6H5v4H3.5A2.5 2.5 0 1 0 6 12.5V11h4v1.5a2.5 2.5 0 1 0 2.5-2.5H11V6h1.5A2.5 2.5 0 1 0 10 3.5V5H6zm4 1v4H6V6h4zm1-1V3.5A1.5 1.5 0 1 1 12.5 5H11zm0 6h1.5a1.5 1.5 0 1 1-1.5 1.5V11zm-6 0v1.5A1.5 1.5 0 1 1 3.5 11H5z"/>
                        </svg>
                        <a href="page/scatter.html" target="content">散点图</a>
                    </div>
                </div>
·
                <div class="menu" onclick="simulateClick(this)">
                    <div class="item">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eyeglasses" viewBox="0 0 16 16">
                            <path d="M4 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm2.625.547a3 3 0 0 0-5.584.953H.5a.5.5 0 0 0 0 1h.541A3 3 0 0 0 7 8a1 1 0 0 1 2 0 3 3 0 0 0 5.959.5h.541a.5.5 0 0 0 0-1h-.541a3 3 0 0 0-5.584-.953A1.993 1.993 0 0 0 8 6c-.532 0-1.016.208-1.375.547zM14 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"/>
                        </svg>
                        <a href="page/radar.html" target="content">雷达图</a>
                    </div>
                </div>
            </main>
        </div>
    </body>
    <script>
        //获取所有的a标签元素
        const sidebarLinks = document.querySelectorAll('#sidebar a');

        // 为每个链接添加点击事件监听器
        sidebarLinks.forEach(link => {
            link.addEventListener('click', function(event) {
                // 首先移除所有链接的选中样式
                sidebarLinks.forEach(link => {
                    link.parentNode.classList.remove('active');
                    link.classList.remove('white')
                });

                link.classList.add('white')
                link.parentNode.classList.add('active');
                
            });
        });

        function simulateClick(menuDiv) {
            // 获取子链接
            const link = menuDiv.querySelector('a');

            // 触发链接的点击事件
            if (link) {
                link.click();
            }
        }
    </script>
</html>